<template>
  <div class="content">
    <div class="content-form">
      <div class="form-th">
        <div class="th-td">序号</div>
        <div class="th-td">变更日期</div>
        <div class="th-td">变更项目</div>
        <div class="th-td">变更前</div>
        <div class="th-td">变更后</div>
      </div>
      <div class="form-tr" v-for="(item, index) in vantListGather.list" :key="index">
        <div class="tr-td">{{ index + 1 }}</div>
        <div class="tr-td">{{ item.createTime }}</div>
        <div class="tr-td">{{ item.changeItem }}</div>
        <div class="tr-td">{{ item.contentBefore }}</div>
        <div class="tr-td">{{ item.contentAfter }}</div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "ChangeRecord",
  data() {
    return {
      pageNum: 1, //默认页码
    };
  },
  props: {
    vantListGather: Object,
  },
  methods: {},
};
</script>
<style lang="less" scoped>
.content {
  width: 100%;
  height: calc(100vh - 630px);
  box-sizing: border-box;
  background-color: #f4f4f4;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 20px 20px 100px;
  .content-form {
    border-left: 1px solid #dce7ec;
    border-top: 1px solid #dce7ec;
    .form-th {
      font-weight: 700;
    }
    .form-tr {
      font-weight: 300;
    }
    .form-th,
    .form-tr {
      width: 100%;
      background-color: #f5faff;
      display: flex;
      .th-td,
      .tr-td {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 10px;
        border-bottom: 1px solid #dce7ec;
        border-right: 1px solid #dce7ec;
        word-wrap: break-word;
        word-break: break-all;
        &:nth-child(1) {
          flex: 2;
        }
        &:nth-child(2) {
          flex: 3;
        }
        &:nth-child(3) {
          flex: 3;
        }
        &:nth-child(4) {
          flex: 5;
        }
        &:nth-child(5) {
          flex: 5;
        }
      }
    }
  }
}
</style>
